<template>
  <div>
    <promoter v-if="nodeConfig.type==0" :modelValue.sync="nodeConfig"></promoter>

    <approver v-if="nodeConfig.type==1" :modelValue.sync="nodeConfig"></approver>

    <send v-if="nodeConfig.type==2" :modelValue.sync="nodeConfig"></send>

    <branch v-if="nodeConfig.type==4" :modelValue.sync="nodeConfig">
      <template v-slot="slot">
        <node-wrap v-if="slot.node" :modelValue.sync="slot.node.childNode"></node-wrap>
      </template>
    </branch>

    <node-wrap v-if="nodeConfig.childNode" :modelValue.sync="nodeConfig.childNode"></node-wrap>
  </div>
</template>

<script>
import approver from './nodes/approver'
import promoter from './nodes/promoter'
import branch from './nodes/branch'
import send from './nodes/send'

export default {
  name: 'nodeWrap',
  props: {
    modelValue: { type: Object, default: () => {} },
  },
  components: {
    approver,
    promoter,
    branch,
    send,
  },
  data() {
    return {
      nodeConfig: {},
    }
  },
  watch: {
    modelValue(val) {
      this.nodeConfig = val
    },
    nodeConfig(val) {
      this.$emit('update:modelValue', val)
    },
  },
  mounted() {
    this.nodeConfig = this.modelValue
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
@import './style/index.scss';
</style>
